<template>
  <div class="imageView-container">
    <div class="image-cell" v-for="(item, index) in modelValue" :key="index">
      <svg-icon
        class-name="el-image"
        v-if="getExtByName(item.url) === 'pdf'"
        icon-class="pdf"
        @click="previewPdf(item.url)"
      />
      <el-image
        v-else
        :src="item.url"
        :preview-src-list="previewList"
        :initial-index="index"
        preview-teleported
      />
    </div>
    <!-- <div>点击图片查看更多细节</div> -->
    <el-dialog v-model="dialogVisiblePdf">
      <PDF :src="pdfUrl"></PDF>
    </el-dialog>
  </div>
</template>
<script setup>
  import { computed, ref } from '@vue/reactivity'
  import PDF from '@/components/PDF'
  import SvgIcon from '@/components/SvgIcon/index.vue'
  import common from '@/utils/common.js'
  const props = defineProps({
    modelValue: {
      type: Array,
      default: [],
    },
  })

  const previewList = computed(() => {
    return props.modelValue.map(({ url }) => url)
  })
  function mouseIn() {
    console.log('mouseIn')
  }

  function mouseOut() {
    console.log('mouseOut')
  }

  function getExtByName(url) {
    return common.getExtByName(url)
  }

  const dialogVisiblePdf = ref()
  const pdfUrl = ref()
  function previewPdf(url) {
    dialogVisiblePdf.value = true
    pdfUrl.value = url
  }
</script>
<style lang="scss" scoped>
  .imageView-container {
    display: block;
    width: 100%;
    .image-cell {
      display: inline-block;
      .el-image {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
  }
</style>
